import QtQuick 1.0
import com.nokia.symbian 1.1
import "SettingsStorage.js" as Settings
import PictureItem 1.0

Page{
    id: root

    property alias model: listViewPreview.model
    property int maxNumOfImages: 4
    property variant resultType: picturePlugin.imageType
    property bool editMode: false
    property string sheetColor: "white"
    property int imageMargin
    property int myMargin: 5

    property string editTextLineOne: qsTr("Press and hold to edit")
    property string editTextLineTwo: qsTr("Double tap to preview")
    property string helpTextLine: qsTr("Double tap to edit")

    Rectangle{
        id: editModeRectangle
        parent: mainRect
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.top: parent.top
        anchors.leftMargin: myMargin
        anchors.rightMargin: myMargin
        anchors.topMargin: myMargin
        visible: true
        radius: myMargin*2
        color: "steelblue"        
        height: myMargin*6


        Text{
            id: editText
            parent: editModeRectangle
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenter: parent.verticalCenter
            anchors.margins: myMargin
            text: editTextLineOne+"\n"+editTextLineTwo
            color: "white"
            font.bold: true            
            visible: root.editMode
            wrapMode: Text.WordWrap

            Behavior on opacity { NumberAnimation{ duration: 100; easing.type: Easing.OutBack } }
        }

        Text{
            id: helpText
            parent: editModeRectangle
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenter: parent.verticalCenter
            anchors.margins: myMargin
            text: helpTextLine
            color: "white"
            font.bold: true
            visible: !root.editMode
            wrapMode: Text.WordWrap

            Behavior on opacity { NumberAnimation{ duration: 100; easing.type: Easing.OutBack } }
        }

        Behavior on height { enabled: true; NumberAnimation{ duration: 100; easing.type: Easing.OutBack } }
        Behavior on width { enabled: true; NumberAnimation { duration: 100; easing.type: Easing.OutBack } }

        states:[
            State{
                name: "editing"
                when: root.editMode
                PropertyChanges {
                    target: editModeRectangle
                    height: (myMargin*6)*2
                }
                PropertyChanges {
                    target: helpText
                    opacity: 0
                }
                PropertyChanges {
                    target: editText
                    opacity: 1
                }
            },
            State{
                name: "review"
                when: !root.editMode
                PropertyChanges {
                    target: editModeRectangle
                    height: myMargin*6
                }
                PropertyChanges {
                    target: helpText
                    opacity: 1
                }
                PropertyChanges {
                    target: editText
                    opacity: 0
                }
            }
        ]
    }

    Rectangle{
        id: mainRect
        anchors.fill: parent
        color: sheetColor
        radius: imageMargin*2

        ListView{
            id: listViewPreview
            anchors.fill: parent
            anchors.margins: imageMargin
            interactive: true

            delegate: Rectangle{
                id: previewDelegate
                width: listViewPreview.width
                height: listViewPreview.width                
                color: "transparent"

                Image{
                    id: delegateImage
                    anchors.fill: parent
                    anchors.margins: imageMargin
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.horizontalCenter: parent.horizontalCenter

                    smooth: true
                    fillMode: Image.PreserveAspectFit
                    sourceSize.width: parent.width/2
                    sourceSize.height: parent.height/2
                    source: url
                    asynchronous: true
                    scale: 0

                    states: [
                        State {
                            name: "loaded"
                            when: delegateImage.status === Image.Ready
                            PropertyChanges { target: delegateImage; scale: 1 }
                        }
                    ]

                    transitions: Transition { NumberAnimation { property: "scale"; duration: 200} }
                }
            }

            MouseArea{
                anchors.fill: parent
                onDoubleClicked: root.editMode = !root.editMode
            }

            states:[
                State{
                    name: "visible"
                    when: !root.editMode
                    PropertyChanges {
                        target: listViewPreview
                        opacity: 1
                    }
                },
                State{
                    name: "unvisible"
                    when: root.editMode
                    PropertyChanges {
                        target: listViewPreview
                        opacity: 0
                    }
                }
            ]

            transitions: Transition {
                NumberAnimation { target: listViewPreview; property: "opacity"; duration: 200; onRunningChanged: if(!running) gridViewEditMode.visible = !gridViewEditMode.visible }
            }
        }

        GridView{
            id: gridViewEditMode
            anchors.fill: parent
            anchors.margins: imageMargin
            interactive: false
            model: listViewPreview.model
            flow: GridView.TopToBottom

            cellHeight: Math.floor(gridViewEditMode.height/gridViewEditMode.count)
            cellWidth: gridViewEditMode.width

            MouseArea{
                id: editmodeMouseArea


                property int currentId: -1
                property int newIndex
                property int index: gridViewEditMode.indexAt(mouseX, mouseY)
                anchors.fill: parent
                onPressAndHold: currentId = root.model.get(newIndex = index).galleryIndex
                onReleased: currentId = -1
                onMousePositionChanged:
                    if (editmodeMouseArea.currentId !== -1 && index !== -1 && index !== newIndex)
                        root.model.move(newIndex, newIndex = index, 1)

                onDoubleClicked: root.editMode = !root.editMode
            }

            states:[
                State{
                    name: "visible"
                    when: root.editMode
                    PropertyChanges {
                        target: gridViewEditMode
                        opacity: 1
                    }
                },
                State{
                    name: "unvisible"
                    when: !root.editMode
                    PropertyChanges {
                        target: gridViewEditMode
                        opacity: 0
                    }
                }
            ]

            transitions: Transition {
                NumberAnimation { target: gridViewEditMode; property: "opacity"; duration: 200; onRunningChanged: if(!running) listViewPreview.visible = !listViewPreview.visible}
            }

            delegate: Rectangle{
                id: gridDelegate
                height: gridViewEditMode.cellHeight
                width: gridViewEditMode.cellWidth
                color: "transparent"

                Image{
                    id: editDelegateImage
                    parent: editmodeMouseArea

                    x: gridDelegate.x
                    y: gridDelegate.y+imageMargin
                    width: gridDelegate.width
                    height: gridDelegate.height-imageMargin

                    fillMode: Image.PreserveAspectFit
                    sourceSize.width: gridDelegate.width/2
                    sourceSize.height: gridDelegate.height/2
                    source: url
                    asynchronous: true
                    scale: 0

                    Rectangle{
                        anchors.fill: parent
                        border.color: "lightsteelblue"
                        border.width: 5
                        color: "transparent"
                        radius: 5
                        visible: editDelegateImage.state === "active"

                        SequentialAnimation on border.color{
                            ColorAnimation { from: "lightsteelblue"; to: "steelblue"; duration: 400 }
                            ColorAnimation { from: "steelblue"; to: "lightsteelblue"; duration: 400 }
                            running: visible
                            loops: Animation.Infinite; alwaysRunToEnd: true
                        }
                    }

                    Behavior on x { enabled: editDelegateImage.state !== "active"; NumberAnimation { duration: 400; easing.type: Easing.OutBack } }
                    Behavior on y { enabled: editDelegateImage.state !== "active"; NumberAnimation { duration: 400; easing.type: Easing.OutBack } }

                    SequentialAnimation on rotation {
                        id: rotationAnimation
                        NumberAnimation { to:  3; duration: 60 }
                        NumberAnimation { to: -3; duration: 120 }
                        NumberAnimation { to:  0; duration: 60 }
                        running: editmodeMouseArea.currentId !== -1 && editDelegateImage.state !== "active"
                        loops: Animation.Infinite; alwaysRunToEnd: true
                    }

                    states: [
                        State {
                            name: "active";
                            when: editmodeMouseArea.currentId === galleryIndex
                            PropertyChanges { target: editDelegateImage
                                x: editmodeMouseArea.mouseX - width/2
                                y: editmodeMouseArea.mouseY - height/2
                                scale: 0.7
                                z: 10                                
                            }
                        },
                        State {
                            name: "loaded"
                            when: editDelegateImage.status === Image.Ready
                            PropertyChanges { target: editDelegateImage; scale: 1 }
                        }
                    ]

                    transitions: Transition { NumberAnimation { property: "scale"; duration: 200} }
                }
            }
        }
    }

    function setResultData(){
        pageStack.push(resultPage,{imageList: listViewPreview.model});
    }

    function setDefault(){
        resultType = PictureItem.Nothing
        editMode = false
        galleryPage.removeEmptyImages();
    }

}
